<!--
  *@Description : 这里是选择地址组件
  *@author 萧红
  *@date 2020-04-06 14:53
  *@LastEditTime 2020-04-06 14:53
  *@LastEdititors
-->
<template>
  <div id="SelectAddress">
    <div class="return-btn">
      <i class="cubeic-back" @click="$emit('close')"></i>
      <span class="title">选择地址</span>
    </div>
    <div :style="{height: $inerHeight + 'px'}">
      <cube-radio-group v-model="selected" :hollow-style="true">
        <div class="select-item" v-for="(item,index) in data" :key="index" @click="changeSelect(index)">
          <cube-radio :option="''+index">
            <div class="myinfo">
              <div style="float:left">收件人：{{item.name}}</div>
              <div style="float:right">{{item.phone}}</div>
              <div style="clear: both"></div>
              <div class="re-address">{{item.province + item.city + item.county + item.address}}</div>
            </div>
          </cube-radio>
        </div>
      </cube-radio-group>
      <div class="addAddress-btn" @click="toNewPage('/addAddress')">
        <i class="iconfont iconjia"></i>
        <span>新增收货地址</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectAddress',
  props: {
    data: {
      type: Array | Object,
      required: true
    },
    selected: {
      type: String,
      default: ''
    }
  },
  created () {
    console.log(this.selected)
    if (this.selected === '') {
      this.data.forEach((item, index) => {
        if (item.default) {
          this.selected = index + ''
        }
      })
    }
  },
  methods: {
    changeSelect (index) {
      console.log(this.data[index])
      this.$emit('change', this.data[index], index)
    }
  }
}
</script>

<style lang="stylus">
@import "../../../node_modules/stylus-px2rem"
  #SelectAddress
  {
    .return-btn
    {
      height 15px
      line-height 15px
      padding 2px 5px
      display flex
      flex-flow row nowrap
      align-items center
      background-color #ff689b
      color snow
      position relative
      i
      {
        margin-right: 5px
        font-size 8px
      }
      .title
      {
        position: absolute
        left:50%
        transform translateX(-50%)
      }
    }
    .select-item
    {
      position relative
      padding 2px 0px
      box-sizing border-box
      border-bottom 1px solid #f0f0f0
      .myinfo
      {
        width: 100%
        min-height: 20px
        overflow hidden
        font-size 6px
        color:#555
        margin-left:5px
        .re-address
        {
          font-size:6.5px
          color:#999
          padding 2px 0px
        }
      }
    }
    .addAddress-btn
    {
      width: 100%;
      height:22px;
      line-height:22px;
      position: fixed;
      left: 0px;
      bottom: 0px;
      box-shadow: 0 0 4px rgba(0,0,0,.4);
      z-index: 111;
      display flex
      flex-flow row nowrap
      justify-content center
      align-items center
      background-color #ff4466
      color snow
      font-size 6px
      i
      {
        margin-right: 5px
        font-size 8px
      }
    }
  }
</style>
